<template>
  <div>
    <h1>干货集中营</h1>
    <div class="my-card" v-for="(item, index) of todos" :key="index">
      <div class="my-img"><img :src="item.url" alt="" /></div>
      <div class="">
        {{ item.desc }}
      </div>
      <div>作者:{{ item.author }} 日期:{{ item.createdAt }}</div>
    </div>

    <div>
      <button class="layui-btn layui-btn-normal" @click="AddList">
        下一页
      </button>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "GanHuo",
  data() {
    return {
      todos: {},
      page: 1,
    };
  },
  created() {
    this.GetList();
  },
  methods: {
    GetList() {
      axios({
        url: `https://gank.io/api/v2/data/category/Girl/type/Girl/page/${this.page}/count/10`,
      }).then((res) => {
        this.todos = res.data.data;
      });
    },
    AddList() {
      this.page += 1;
      this.GetList();
    },
  },
};
</script>

<style scoped lang="stylus">
@import "~_layui@2.6.8@layui/dist/css/layui.css"
.my-card
  height 500px
  width 400px
  margin 50px auto
  border 3px solid aqua
.my-img img
  margin-top 50px
  height 300px
  width: 100%;
  object-fit cover
</style>
